<template lang='pug'>
.fw-box(:class="datas.enabledBoundary?'ONFLAG':'OFFLAG'")
  .fw-head-base -
  .fw-body
    .fw-body-base
      .body-base-deviceName.font-weight-bold {{datas.deviceName|filterOption(columns.deviceName.options)}}
      .body-base-department 地址：{{datas.installAddress}}
    hr.hr-line
    .body-base-recordTime
      .fw-body-target
        span.target-list-key 采集时间:
        span {{datas.time}}
      .fw-body-target(
        style="display: ${index >= 3 ? 'none' : 'flex'}"
        v-for="(target, index) in infoList"
        :key="`target_${index}`")
        span.target-list-key {{columns[target].label}}:
        span.target-list-value(:class="datas.enabledBoundary?'isOn':'isOff'") {{datas[target]|filterOption(columns[target].options)}}
        //- span.target-list-unit ${dataList[target].unit ? dataList[target].unit : ''}
    //- .triangle(@click="this.isExpand = !this.isExpand")
    //-   span.triangle-item.iconfont.toggle-top(:class="!this.isExpand ? 'icon-angle-down' : 'icon-angle-up'")
    //-   span.triangle-item.iconfont.toggle-bottom(:class="!this.isExpand ? 'icon-angle-down' : 'icon-angle-up'")
</template>

<script>
/**
* @name InfoWindow
* @desc 信息窗体
*/

export default {
  name: 'InfoWindow',
  props: {
    columns: {
      type: Object,
      default: () => ({})
    },
    infoValues: {
      type: Object,
      default: () => ({})
    }
  },
  filters: {
    filterOption (val, options) {
      if (!options || !options.length) return val
      return options.find(opt => opt.value === val).label || '-'
    }
  },
  data () {
    return {
      isExpand: false, // 是否展开
      datas: {
        ...this.infoValues,
        diameter: 'DN ' + this.infoValues.diameter,
        time: this.$moment(this.infoValues.updateTime).format('YYYY-MM-DD HH:mm')
      },
      infoList: ['siteCode', 'deviceType', 'diameter', 'enabledBoundary', 'fromAreaName', 'toAreaName']
    }
  },
  watch: {
    infoValues (value) {
      this.datas = {
        ...value,
        diameter: 'DN ' + value.diameter,
        time: this.$moment(value.updateTime).format('YYYY-MM-DD HH:mm')
      }
    }
  },
  // filters: {
  //   formatTime (timeStramp) {
  //     return this.$moment(timeStramp).format('YYYY-MM-DD HH:mm')
  //   }
  // },
  methods: {
    // 窗体内部信息整理
    // initFomation (value) {
    //   this.fomation = cloneDeep(value)
    //   // console.log('111-', this.fomation)
    //   const targetList = this.fomation.data
    //   const policeFlag = { label: '状态', value: flagList[this.fomation.policeFlag] }
    //   const dataList = { ...targetList, policeFlag: policeFlag }
    //   const recordTime = this.$moment(this.fomation.recordTime).format('YYYY-MM-DD HH:mm')
    //   return {
    //     dataList,
    //     recordTime
    //   }
    // },
    // showInfoData (val, list) {
    //   const columns = this.columns
    //   // const {columns} = getDyncRelation({target: this, columns: mapConfig.mapColumns})
    //   let data = ''
    //   list.map((info, key) => {
    //     const infoValue = infoRender({
    //       data: val[info],
    //       column: columns[info],
    //       full: val,
    //       index: key
    //     })
    //     data += `<p style="margin: 0"><span class="info-label">${columns[info].label}</span>：${infoValue}</p>`
    //   })
    //   return data
    // }
  }
}
</script>

<style lang='sass' scoped>
$on-col: #F47437
$off-col: #AA71FF
.isOn
  color: $on-col
.isOff
  color: $off-col
.fw-head-base
  height: 28px
  line-height: 28px
  text-align: center
  font-weight: 600
  padding: 0px 15px
.fw-body
  padding: 10px 15px 10px 15px
.ONFLAG
  border: 1px solid $on-col
  .fw-head-base
    background: $on-col
  .amap-info-content
    &:after
      border-color: $on-col
.OFFLAG
  border: 1px solid $off-col
  .fw-head-base
    background: $off-col
  .amap-info-content
    &:after
      border-color: $off-col
.target-list-key
  width: 90px
  display: inline-block
  text-align-last: justify
  margin-right: 10px
.hr-line
  margin: 5px 0
</style>
